<template>
  <div class="form-single-fragment" style="position: relative;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" size="mini" label-position="right">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用章类型" prop="sealType" >
            <el-select v-model="sealType" multiple clearable collapse-tags
              placeholder="请选择" @change="selectsealType">
              <el-option label="无" :value="1"></el-option>
              <el-option label="项目公章" :value="2"></el-option>
              <el-option label="项目财务章" :value="3"></el-option>
              <el-option label="成果章" :value="4"></el-option>
              <el-option label="许平人员章" :value="5"></el-option>
              <el-option label="赵冲人员章" :value="6"></el-option>
              <el-option label="牛天敏人员章" :value="7"></el-option>
              <el-option label="李彦文人员章" :value="8"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用章份数" prop="sealNumber">
            <el-input type="number" class="input-item" v-model="ruleForm.sealNumber" placeholder="请输入" oninput="if(value.indexOf('.')>0){value=Number(value).toFixed(0)}if(value<0){value='0'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="附件上传">
        <el-upload class="upload-demo"
          :action="action"
          :on-change="handleSuccess"
          :on-remove="handleRemove"
          :before-upload="beforeAvatarUpload"
          :accept="acceptStr"
          multiple
          :file-list="fileLists">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf/doc/wrod/ppt/ecxel文件，且不超过500MB</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="完成说明" prop="completionInstruction">
        <el-input type="textarea" class="input-item" v-model="ruleForm.completionInstruction" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item style="padding: 20px 0;">
        <el-button size="mini" @click="onCancel(false)">取消</el-button>
        <el-button type="primary" size="mini" @click="submitForm()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { fileUploadFileDo } from '@/api/projectAdministration.js';
export default {
  name: 'TasksComplete',
  props: {
    tasksId: {
      default: undefined
    }
  },
  data () {
    return {
      loading: false,
      isShowloading: false,
      action: fileUploadFileDo,
      fileLists: [],
      acceptStr: '.doc,.docx,.xls,.xlsx,.jpg,.png,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.pdf,.ppt,.pptx',
      sealType: '',
      ruleForm: {
        sealType: '',
        sealNumber: '',
        fileIds: '',
        completionInstruction: ''
      },
      rules: {
        completionInstruction: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    };
  },
  created () {
  },
  computed: {
    isEdit () {
      return this.tasksId != null && this.tasksId !== '';
    }
  },
  mounted () {
    if (this.isEdit) {
    }
  },
  methods: {
    selectsealType (data) {
      this.ruleForm.sealType = data.join(',')
    },
    /**
     * 上传文件-成功
     */
    handleSuccess (file, fileList) {
      this.fileLists = fileList
    },
    /**
     * 上传文件-删除
     */
    handleRemove (file, fileList) {
      this.fileLists = fileList
    },
    /**
     * 上传图片限制条件
     */
    beforeAvatarUpload (file, fileList) {
      // const isJPG = file.type === 'image/jpeg'
      // const isLt200K = file.size / 1024 < 200
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      //   return false
      // }
      // if (!isLt200K) {
      //   this.$message.error('上传头像图片大小不能超过 200KB!')
      //   return false
      // }
      // return isJPG && isLt200K
    },
    /**
     * 提交表单
     */
    submitForm () {
      if (this.fileLists.length !== 0) {
        let filesnew = []
        this.fileLists.forEach((item) => {
          filesnew.push(item.response.data.fileId)
        })
        this.ruleForm.fileIds = filesnew
      }
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$confirm('确定要提交完成吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.onCancel(true);
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onCancel (isSuccess) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess, this.ruleForm);
      }
    }
  }
}
</script>
